<template lang="pug">
.index
  .index-header
    router-link.logo(:to="{ name: 'index' }")
      img(src="../static/images/logo_black.png")
    //- .header-login(@click="loginpwd") 密码登录
    .header-login(@click="login" v-if="!userInfo.userName") 登录
    .header-name(v-else @click.stop="changeDropdown") {{userInfo.userName}}
      transition(name="dropdown")
        .header-head-dropdown(v-if="showDropdown" @click="logout") 退出登录
  pwd-login-vue(:show="showLogin" @close="close")
</template>

<script>
import { mapActions, mapState } from 'vuex'
import { delCookie } from 'utils/cookie'
import pwdLoginVue from './modal/pwdLogin.vue'
import { logout } from 'api'
export default {
  name: 'index',
  data () {
    return {
      showLogin: false,
      showDropdown: false
    }
  },
  computed: {
    ...mapState({
      userInfo: state => state.user.user
    })
  },
  components: {
    pwdLoginVue
  },
  methods: {
    ...mapActions([
      'changeLogin',
      'changeUserInfo'
    ]),
    loginpwd () {
      this.showLogin = true
    },
    close () {
      this.showLogin = false
    },
    changeDropdown () {
      this.showDropdown = !this.showDropdown
    },
    async logout () {
      try {
        await this.$axios.post(logout)
        localStorage.removeItem('USERINFO')
        this.changeUserInfo({})
        delCookie('CNPASS')
      } catch (err) {
        console.log(err)
        this.$message.error(err.message || err.ResultSet.errors)
      }
    },
    login () {
      this.changeLogin({ show: true })
    }
  }
}
</script>

<style lang="scss" scoped>
.index-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  height: 80px;
}
.logo {
  width: 100px;
  display: flex;
  align-items: center;
}
.header-login {
  position: relative;
  font-size: 20px;
  font-weight: bold;
  color: #CD9E78;
  cursor: pointer;
}
.header-name {
  font-size: 20px;
  font-weight: bold;
  color: #CD9E78;
  position: relative;
}
.dropdown-leave-active {
  transition: all .3s ease;
}
.dropdown-enter-active,.dialog-leave-active {
  opacity: 0
}
.dropdown-enter-active .header-head-dropdown,
.dropdown-leave-active .header-head-dropdown {
  top: -999999px;
  opacity: 0;
}
.header-head-dropdown {
  position: absolute;
  top: 40px;
  right: 0;
  padding: 20px 24px;
  background: #FFFFFF;
  box-shadow: 0px 6px 18px 0px rgba(54, 54, 54, 0.16);
  border-radius: 6px;
  transition: all .3s;
  z-index: 99;
  opacity: 1;
  font-size: 16px;
  white-space: nowrap;
}
</style>
  